<template>
  <div class="dashboard-editor-container">
    <el-row style="background: #fff;">
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane key="cpu资源" label="cpu资源" name="cpuresource" lazy>
          <cpuresource ref="cpuresource"></cpuresource>
        </el-tab-pane>
        <el-tab-pane key="内存资源" label="内存资源" name="memoryResources" lazy>
          <memoryResources ref="memoryResources"></memoryResources>
        </el-tab-pane>
        <el-tab-pane key="系统磁盘" label="系统磁盘" name="diskResources" lazy>
          <diskResources ref="diskResources"></diskResources>
        </el-tab-pane>
        <el-tab-pane key="扩展磁盘" label="扩展磁盘" name="diskExpandResources" lazy>
          <diskExpandResources ref="diskExpandResources"></diskExpandResources>
        </el-tab-pane>
        <el-tab-pane key="显卡性能" label="显卡性能" name="graphicsCardPerformance" lazy>
          <graphicsCardPerformance ref="graphicsCardPerformance"></graphicsCardPerformance>
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </div>
</template>
<script>
import cpuresource from './cpuresource.vue'
import memoryResources from './memoryResources.vue'
import diskResources from './diskResources.vue'
import diskExpandResources from './diskExpandResources.vue'
import graphicsCardPerformance from './graphicsCardPerformance.vue'
export default {
  components: { cpuresource, memoryResources, diskResources, diskExpandResources, graphicsCardPerformance },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 10,
      activeName: 'cpuresource',
      fileList: [],
      tableData: [],
      emailForm: {},
      emailList: [],
      imgurl: '',
      ImgBase64: '',
      imgdialog: false,
      dialogVisible: false,
      rules: {
        Descp: [
          { required: true, message: "请输入资源名称" }
        ]
      },
      resourceForm: {},
      Action: 1,
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.$nextTick(() => {
      this.handleClick({ name: this.activeName });
    });
  },
  methods: {
    handleClick(tab) {
      this.$nextTick(() => {
        const ref = this.$refs[tab.name];
        if (ref && typeof ref.getData === 'function') {
          ref.getData();
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
@import "~@/styles/variables.scss";

.content {
  position: relative;
  margin-top: 25px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  ::v-deep .certification {
    .el-form-item {
      margin-bottom: 10px;
    }

    .el-col {
      display: flex;
      align-items: center;

      p {
        width: 100px;
        display: block;
        color: #aaa;
        font-size: 12px;
        padding-left: 20px;
        white-space: nowrap;
      }
    }
  }
}

.top {
  flex-wrap: nowrap;
  margin-bottom: 20px;
}

.btn {
  margin: 20px 0;
}


.key-word-textarea {
  height: 170px;
  overflow: hidden;
  box-shadow: 0px -1px 5px 0px rgba(220, 229, 255, 0.7);
  border: 1px solid #D3D5E0;
  border-top: none;
  align-items: flex-start;

  .el-textarea ::v-deep {
    .el-textarea__inner {
      border: none;
      border-radius: 0;
      line-height: 20px;
      font-size: 14px;
      height: 172px !important;
      min-height: 172px !important;
    }
  }
}


.text-area-num-scroll {
  width: 28px;
  overflow: hidden;
  height: 180px;
  background: #F5F6FA;
  padding-top: 5px;
}

.text-area-num-box {
  min-height: 172px;
  overflow-y: auto;
  height: 172px;
  width: 48px;
  padding-bottom: 10px;
}

.text-area-num {
  line-height: 20px;
  width: 28px;
  text-align: center;
}

.flex {
  display: flex;
}
</style>